<script setup>
import router from "@/router/router.js";
import {ref, watch} from "vue";
import {useRoute} from "vue-router";



const route = useRoute();
const activeIndex = ref('');

//8/4 修复点击aside组件点击后页面无跳转：根本原因 路由配置没有配置name属性
watch(
    () => route.name,
    (newName) => {
      switch (newName) {
        case 'home':
          activeIndex.value = 'home';
          console.log(activeIndex.value)
          break;
        case 'staff':
          activeIndex.value = 'staff';
          console.log(activeIndex.value)

          break;
        case 'performance':
          activeIndex.value = 'performance';
          console.log(activeIndex.value)
          break;
        default:
          activeIndex.value = 'home';
          console.log(activeIndex.value)

      }
    },
    { immediate: true } // 初始化时立即执行
);
const push = (index) => {
  switch (index) {
    case 'home':
      router.push('/home');
      break;
    case 'staff':
      router.push('/staff');
      break;
    case 'performance':
      router.push('/performance');
      break;
    case 'hire':
      router.push('/hire');
      break;
    case '5':
      router.push({ name: '' });
      break;
    default:
      router.push({ name: 'home' });
  }
};

</script>

<template>
 <div class="menu">
   <el-row>
     <el-col :span="12">
       <h5 class="mb-2">HRM管理系统</h5>
       <el-menu
           :default-active="activeIndex"
           active-text-color="#ffd04b"
           background-color="#545c64"
           class="el-menu-vertical"
           @select="push"
           text-color="#fff"
       >
         <el-menu-item index="home">
           <el-icon><House /></el-icon>
           <span>首页</span>
         </el-menu-item>
         <el-menu-item index="staff">
           <el-icon><User /></el-icon>
           <span>员工列表</span>
         </el-menu-item>
         <el-menu-item index="performance">
           <el-icon><Tickets /></el-icon>
           <span>部门绩效</span>
         </el-menu-item>
         <el-menu-item index="hire">
           <el-icon><ChatLineSquare /></el-icon>
           <span>招聘管理</span>
         </el-menu-item>
         <el-menu-item index="5">
           <el-icon><setting /></el-icon>
           <span>设置</span>
         </el-menu-item>
       </el-menu>
     </el-col>
   </el-row>
 </div>
</template>

<style scoped>
.menu{
  height: 100%;
  width: 100%;
}
.el-menu-vertical {
  height: 90vh;
  width: 300px;
  overflow-y: auto;
}
.mb-2{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
}
.el-row{
  background-color:#545c64;
  line-height: 15px;
}
.el-menu-item{
  font-weight: bold;
  font-size: 18px;
}


</style>